<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>기본 예제</title>
<meta name="class-lists" content="jindo.RollingChart"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="가장 기본적인 사용 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	#rolling_chart ol { list-style:none; margin:0; padding:0; width:310px; border:5px solid yellowgreen; }
	#rolling_chart ol li { position:relative; height:20px; padding:5px; }
	#rolling_chart .rollingchart-item { position:absolute; overflow:hidden; top:5px; height:20px; list-style:none; margin:0; padding:0; }
	#rolling_chart .rollingchart-item li { border:0px; margin:0; padding:0; }
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<button onclick="oRollingChart.activate()">activate</button>
	<button onclick="oRollingChart.deactivate()">deactivate</button>
	<div id="rolling_chart">
		<ol>
			<li>
				<ul class="rollingchart-item">
					<li>서든어택</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>던전앤파이터</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item"> 
					<li>아이온:영원의탑</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>피파온라인2</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>리니지</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>테라</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>메이플스토리</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>카트라이더</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>말과나의이야기,앨리샤</li>
				</ul>
			</li>
			<li>
				<ul class="rollingchart-item">
					<li>크레이지아케이드비엔비</li>
				</ul>
			</li>
		</ol>
	</div>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Timer.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Effect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Transition.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Rolling.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.RollingChart.js"></script>
<script type="text/javascript">

	var oRollingChart = new jindo.RollingChart(jindo.$('rolling_chart'), {
		nDuration : 300, //롤링될 시간
		nRollingInterval : 10, //각 롤링간의 시간간격
		sUrl : "../asset/server/RollingChart.php", //요청 url
		sRequestType : "jsonp", //요청타입
		sRequestMethod : "get", //요청방식
		htRequestParameter : { p : 10 }, //요청 파라메터
		nRequestInterval : 7000 //새로운 목록을 가져올 시간 간격 (ms)
	});
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>
